<template>
  <div>
    <el-row class="tac">
      <el-col :span="12">
        <el-menu
          router
          default-active="2"
          class="el-menu-vertical-demo hovue"
          @open="handleOpen"
          @close="handleClose"
        >
          <el-menu-item index="/" class="active">
            <i
              class="el-icon-s-home active"
              style="margin-right: 10px; margin-left: -20px"
            ></i>
            <span slot="title" class="active">帝可得</span>
          </el-menu-item>
          <el-submenu index="/" class="active">
            <template slot="title">
              <i
                class="el-icon-tickets active"
                style="margin-right: 10px; margin-left: -10px"
              ></i>
              <span class="active">工单管理</span>
            </template>
            <el-menu-item index="/task/business" id="active"
              >运营管理</el-menu-item
            >
            <el-menu-item index="/task/operation">运维管理</el-menu-item>
          </el-submenu>
          <el-submenu index="/node" class="active">
            <template slot="title">
              <i
                class="el-icon-tickets active"
                style="margin-right: 10px; margin-left: -10px"
              ></i>
              <span class="active">点位管理</span>
            </template>
            <el-menu-item index="/node/region" id="active"
              >区域管理</el-menu-item
            >
            <el-menu-item index="/node/node">点位管理</el-menu-item>
            <el-menu-item index="/node/partner">合作商管理</el-menu-item>
          </el-submenu>
              <el-submenu index="/node" class="active">
            <template slot="title">
              <i
                class="el-icon-tickets active"
                style="margin-right: 10px; margin-left: -10px"
              ></i>
              <span class="active">设备管理</span>
            </template>
            <el-menu-item index="/vm/index" id="active"
              >设备管理</el-menu-item
            >
            <el-menu-item index="/vm/status">设备状态</el-menu-item>
            <el-menu-item index="/vm/type">设备类型管理</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-col>
    </el-row>
    <div class="tac">
      <!-- 2222 -->
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

<style lang="less" scoped>
.el-col-12 {
  width: 167px;
  height: 100vh;
}
.el-menu {
  border-right: none;
  list-style: none;
  position: relative;
  margin: 0 0 0 -40px;
  // padding-left: -40px;
  background-color: #fff;
}
.tac {
  float: left;
  // background-color: #f8fafe;
}
.el-submenu .el-menu-item {
  padding: 0 10px;
}
.el-icon-s-home:active {
  color: #5f84ff;
}
.active:active {
  color: #5f84ff;
}
/deep/.el-submenu .el-menu-item:active {
  color: #5f84ff !important ;
}
</style>
